<!DOCTYPE html>
<html lang="en">
<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ycngu的博客">
    <meta name="keyword" content="noob">
    <link rel="shortcut icon" href="/img/favicon.ico">

    <title>
        
        关于Cookie和Session以及响应头 - ycngu的博客 | Ycngu&#39;s Blog
        
    </title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/aircloud.css">
    <link rel="stylesheet" href="/css/gitment.css">
    <!--<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">-->
    <link href="//at.alicdn.com/t/font_620856_pl6z7sid89qkt9.css" rel="stylesheet" type="text/css">
    <!-- ga & ba script hoook -->
    <script></script>
</head>

<body>

<div class="site-nav-toggle" id="site-nav-toggle">
    <button>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
    </button>
</div>

<div class="index-about">
    <i> 菜鸟前端为何要战斗？ </i>
</div>

<div class="index-container">
    
    <div class="index-left">
        
<div class="nav" id="nav">
    <div class="avatar-name">
        <div class="avatar">
            <img src="/img/avatar.jpg">
        </div>
        <div class="name">
            <i>YCNGU</i>
        </div>
    </div>
    <div class="contents" id="nav-content">
        <ul>
            <li>
                <a href="/">
                    <i class="iconfont icon-shouye1"></i>
                    <span>主页</span>
                </a>
            </li>
            <li>
                <a href="/tags">
                    <i class="iconfont icon-biaoqian1"></i>
                    <span>标签</span>
                </a>
            </li>
            <li>
                <a href="/archive">
                    <i class="iconfont icon-guidang2"></i>
                    <span>存档</span>
                </a>
            </li>
            <li>
                <a href="/about/">
                    <i class="iconfont icon-guanyu2"></i>
                    <span>关于</span>
                </a>
            </li>
            
            <li>
                <a id="search">
                    <i class="iconfont icon-sousuo1"></i>
                    <span>搜索</span>
                </a>
            </li>
            
        </ul>
    </div>
    
        <div id="toc" class="toc-article">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Cookie-和-Session-的区别"><span class="toc-text">Cookie 和 Session 的区别</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Cookie-和-LocalStorage-的区别？"><span class="toc-text">Cookie 和 LocalStorage 的区别？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#LocalStorage-和-SessionStorage-的区别"><span class="toc-text">LocalStorage 和 SessionStorage 的区别</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Cookie-如何设置过期时间？"><span class="toc-text">Cookie 如何设置过期时间？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#如何删除-Cookie？"><span class="toc-text">如何删除 Cookie？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Cache-Control-max-age-1000-缓存-与-ETag-的「缓存」有什么区别？"><span class="toc-text">Cache-Control: max-age=1000 缓存 与 ETag 的「缓存」有什么区别？</span></a></li></ol>
</div>
    
</div>


<div class="search-field" id="search-field">
    <div class="search-container">
        <div class="search-input">
            <span id="esc-search"> <i class="icon-fanhui iconfont"></i></span>
            <input id="search-input">
            <span id="begin-search">搜索</span>
        </div>
        <div class="search-result-container" id="search-result-container">

        </div>
    </div>
</div>
        <div class="index-about-mobile">
            <i> 菜鸟前端为何要战斗？ </i>
        </div>
    </div>
    
    <div class="index-middle">
        <!-- Main Content -->
        


<div class="post-container">
    <div class="post-title">
        关于Cookie和Session以及响应头
    </div>

    <div class="post-meta">
        <span class="attr">发布于：<span>2018-12-26 15:36:54</span></span>
        
        <span class="attr">标签：/
        
        <a class="tag" href="/tags/#javascript" title="javascript">javascript</a>
        <span>/</span>
        
        
        </span>
        <span class="attr">访问：<span id="busuanzi_value_page_pv"></span>
</span>

    </div>
    <div class="post-content ">
        <h1 id="Cookie-和-Session-的区别"><a href="#Cookie-和-Session-的区别" class="headerlink" title="Cookie 和 Session 的区别"></a>Cookie 和 Session 的区别</h1><p>Cookie是服务器通过Set-Cookie响应头给浏览器的一串字符串<br>浏览器访问相同域名时必须带上这段字符串<br>浏览器在一段时间内要保存Cookie<br>Cookie的大小大概在4KB左右<br>————————————————————<br>Session是服务器保存的<br>服务器通过Cookie给浏览器一个SessionID<br>服务器有一块内存保存了类似于 { SessionID：Session }的哈希数据结构<br>浏览器访问服务器时，服务器读取SessionID，根据ID找到对应的Session，服务器就可以读取Session中的用户信息了</p>
<h1 id="Cookie-和-LocalStorage-的区别？"><a href="#Cookie-和-LocalStorage-的区别？" class="headerlink" title="Cookie 和 LocalStorage 的区别？"></a>Cookie 和 LocalStorage 的区别？</h1><p>Cookie是服务器通过Set-Cookie响应头给浏览器的一串字符串<br>浏览器访问相同域名时必须带上这段字符串<br>浏览器在一段时间内要保存Cookie<br>Cookie的大小大概在4KB左右<br>——————————————————————————————————————<br>LocalStorage是在浏览器本地保存的（可能保存在C盘之类的地方）并且和HTTP无关<br>只有在相同域名的页面才能互相读取LocalStorage，但是没有同源策略那么严格<br>LocalStorage如果用户不特意清除会永远保存<br>LocalStorage的大小大概在5MB左右</p>
<h1 id="LocalStorage-和-SessionStorage-的区别"><a href="#LocalStorage-和-SessionStorage-的区别" class="headerlink" title="LocalStorage 和 SessionStorage 的区别"></a>LocalStorage 和 SessionStorage 的区别</h1><p>LocalStorage是在浏览器本地保存的（可能保存在C盘之类的地方）并且和HTTP无关<br>只有在相同域名的页面才能互相读取LocalStorage，但是没有同源策略那么严格<br>LocalStorage如果用户不特意清除会永远保存<br>LocalStorage的大小大概在5MB左右<br>————————————————————————————————————————<br>SessionStorage和LocalStorage差不多，但是SessionStorage关闭页面就会消失</p>
<h1 id="Cookie-如何设置过期时间？"><a href="#Cookie-如何设置过期时间？" class="headerlink" title="Cookie 如何设置过期时间？"></a>Cookie 如何设置过期时间？</h1><p>两种方法，设置Cache-Control或者设置Expires,设置Expires是老方法，现在推荐使用Cache-Control</p>
<p>Cache-Contro:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">response.setHeader(<span class="string">'Cache-Contro'</span>,<span class="string">'max-age=30'</span>)</span><br></pre></td></tr></table></figure></p>
<p>Expires：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">response.setHeader(<span class="string">'Expires'</span>,<span class="string">'Wed, 26 Dec 2018 06:59:19 GMT'</span>)</span><br></pre></td></tr></table></figure></p>
<p>两者的区别是前者规定过了多少时间后失效，后者是到了某个时间之后失效(后者指的是本地时间)</p>
<h1 id="如何删除-Cookie？"><a href="#如何删除-Cookie？" class="headerlink" title="如何删除 Cookie？"></a>如何删除 Cookie？</h1><p>可以用js来删除，也可以用户通过浏览器的清除缓存选项，把清除Cookie勾选上来删除。<br>还有Cookie过期了就自动删除了</p>
<h1 id="Cache-Control-max-age-1000-缓存-与-ETag-的「缓存」有什么区别？"><a href="#Cache-Control-max-age-1000-缓存-与-ETag-的「缓存」有什么区别？" class="headerlink" title="Cache-Control: max-age=1000 缓存 与 ETag 的「缓存」有什么区别？"></a>Cache-Control: max-age=1000 缓存 与 ETag 的「缓存」有什么区别？</h1><p>Cache-Control: max-age=1000<br>在一千秒后Cookie会过期，在此期间除了第一次访问外，浏览器会直接从内存获取文件而不是通过Http请求，这个过程产生0流量<br>在一千秒后还得通过Http请求获取文件<br>——————————————————————————————<br>ETag相当于一个版本号，浏览器持有的这个版本号和服务器端一样的话就不用再重新下载文件了，但是和服务器端对比版本号这个过程会产生流量。</p>

        
        <br>
        <div id="comment-container">
        </div>
        <div id="disqus_thread"></div>

        <div id="lv-container">
        </div>

    </div>
</div>

    </div>
</div>


<footer class="footer">
    <ul class="list-inline text-center">
        
        

        

        

        

        

    </ul>
    
    <p>
        <span>/</span>
        
        <span><a href="https://ycngu.gitee.io/">Ycngu&#39;s Page</a></span>
        <span>/</span>
        
        <span><a href="#">It helps SEO</a></span>
        <span>/</span>
        
    </p>
    
    <p>
        <span id="busuanzi_container_site_pv">
            <span id="busuanzi_value_site_pv"></span>PV
        </span>
        <span id="busuanzi_container_site_uv">
            <span id="busuanzi_value_site_uv"></span>UV
        </span>
        Created By <a href="https://hexo.io/">Hexo</a>  Theme <a href="https://github.com/aircloud/hexo-theme-aircloud">AirCloud</a></p>
</footer>




</body>

<script>
    // We expose some of the variables needed by the front end
    window.hexo_search_path = "search.json"
    window.hexo_root = "/"
    window.isPost = true
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/index.js"></script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


    <script>
        /**
         *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
         *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
        */
        if( '' || '')
        var disqus_config = function () {
            this.page.url = '';  // Replace PAGE_URL with your page's canonical URL variable
            this.page.identifier = ''; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        };

        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document, s = d.createElement('script');
            s.src = 'https://airclouds-blog.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>



</html>
